<template>
  <div>
    <mt-spinner v-show="loading" style="margin: 0 auto;" color="#e72e0d" type="double-bounce"></mt-spinner>
    <div class="systemNotice">
      <div class="top-right">
        <span v-if="!editStatus" @click="editStatus=!editStatus">编辑</span>
        <span v-if="editStatus" @click="removeEvent()" class="remove">删除</span>
        <span v-if="editStatus" class="line">|</span>
        <span v-if="editStatus" @click="editStatus=!editStatus">取消</span>
      </div>
      <div class="notice-list">
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
          <li class="systemNotice-li cur-flex cur-align-center h5-hairline--bottom" v-for="(item, index) in noticeData.list" :key="index">
            <div class="item-checkbox" v-if="editStatus">
              <mt-checklist v-model="value" :value="item.id" :options="[item]">
              </mt-checklist>
            </div>
            <div><img class="system-img" :src="item.avatar" alt=""></div>
            <div class="systemNotice-main" @click="$router.push('/noticeSend/index?id='+item.messageId)">
              <p class="title cur-overflow">{{item.senderAccount}}</p>
              <p class="content cur-overflow">{{item.messageContent}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/service/api'
import System from './system'
import Site from './site'
export default {
  title: '消息中心',
  components: {
    System,
    Site
  },
  data () {
    return {
      loading: false,
      editStatus: false,
      value: [],
      noticeData: {
        list: []
      },
      total: 0,
      pageSize: 10,
      pageNum: 1
    }
  },
  created () {
    this.getSiteMessage()
  },
  methods: {
    async getSiteMessage (page) {
      try {
        this.loading = true
        if (!page) {
          page = this.pageNum
        }
        if (page === 1) {
          this.noticeData.list = []
        }
        let res = await api.getSiteMessage({
          pageSize: this.pageSize,
          pageNum: page || this.pageNum,
          ...this.searchData
        })
        this.noticeData.list = this.noticeData.list.concat(res.data.list)
        this.noticeData.list.map((item) => {
          item.check = false
          item.label = ' '
        })
        this.total = res.data.total
        this.pageNum = page
        this.loading = false
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
    async removeSiteNotice () {
      try {
        let curIds = []
        this.value.map((item) => {
          curIds.push(item.messageId)
        })
        await api.removeSiteNotice({
          ids: curIds.join(',')
        })
        this.getSiteMessage(1)
      } catch (e) {
        console.log(e)
      }
    },
    removeEvent () {
      if (this.value.length) {
        this.$confirm('确定删除消息?').then(action => {
          if (action) {
            this.removeSiteNotice()
          }
        })
      } else {
        this.$alert('请选择消息！')
      }
    },
    loadMore () {
      if (!this.loading && this.total > this.noticeData.list.length) {
        this.loading = true
        let curPage = ++this.pageNum
        this.getSiteMessage(curPage)
      }
    }
  }
}
</script>
<style lang="scss">
.systemNotice {
  .mint-cell-wrapper,
  .mint-checklist .mint-cell {
    background: none;
  }
  .mint-checklist-label {
    padding: 0;
  }
  .mint-checklist-title {
    display: none;
  }
  .mint-checkbox-input:checked + .mint-checkbox-core {
    background-color: $red;
    border-color: $red;
  }
  .item-checkbox {
    width: 100px;
  }
  .system-img {
    display: inline-block;
    width: 104px;
    height: 104px;
    border-radius: 50%;
  }
  &-li {
    padding: 28px;
  }
  &-main {
    padding-left: 22px;
    .title {
      color: $text-color;
      font-size: 28px;
    }
    .content {
      color: #9d9d9d;
      line-height: 40px;
      margin-top: 10px;
      font-size: 22px;
    }
  }
}
</style>
